<!-- Author:Rain -->
<template>
    <div v-if="titleShow" id="head" :class="{ 'ssh': this.$IsPhone }">
        <h1 class="typing-effect">欢迎光临小雨哈哈哈哈</h1>
        <h2 class="sub-title">今天也要加油呀</h2>
    </div>
</template>

<script>

export default {
    data() {
        return {
            titleShow: false,
            timer: null
        }
    },
    created() {
        this.timer = setTimeout(() => {
            //添加文字动画效果
            this.titleShow = true
        }, 200)
    },
    mounted() {
        this.timer = null
    }
}
</script>

<style scoped>
#head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 300px;
}
/* 这里写的是哪个文字出场效果 */
.typing-effect {
    width: 16.4ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-size: 26px;
    animation: typing 2s steps(10), effect .5s step-end infinite alternate;
}

h1,
h2 {
    color: rgb(240, 231, 231);
}

@keyframes typing {
    from {
        width: 0;
    }
}

@keyframes effect {
    50% {
        border-color: transparent;
    }
}

.sub-title {
    margin-top: 20px;
    opacity: 0;
    animation: opacity 3s 2.5s forwards;
}

@keyframes opacity {
    to {
        opacity: 1;
    }
}


/* 移动设备样式 */
.ssh {
    transform: translateY(100%);
}
</style>